<template>
  <view class="feed-back">
    <view>
      <textarea placeholder="请描述你的问题，我们会尽快处理并回复（必填）" :auto-upload="false" v-model="reasonValue" style="height:200rpx;width:100vw;padding:32rpx;background:#ffffff"/>
      <view class="upload-img">
        <uni-file-picker limit="9" title="上传图片" @select="successHandler" @delete="deleteHandler"></uni-file-picker>
      </view>
    </view>
    <view class="btn-box">
      <button type="primary" class="set-btn" @click="submitInfo">提交</button>
    </view>
  </view>
</template>
<script setup>
import { ossConfig } from '@/utils/alioss.js'
import { ref, getCurrentInstance } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
const { $https } = getCurrentInstance().appContext.config.globalProperties
const reasonValue = ref('')
const pageOption = ref({})
const uploadImg = ref([])
onLoad((option) => {
  pageOption.value = option
})
const successHandler = (e) => {
  const len = e.tempFiles.length
  for (let i = 0; i < len; i++) {
    ossConfig(e.tempFiles[i].url).then(res => {
      uploadImg.value.push({
        imageUrl: res,
        uuid: e.tempFiles[i].uuid
      })
    })
  }
}
const deleteHandler = (e) => {
  uploadImg.value = uploadImg.value.filter(item => item.uuid !== e.tempFile.uuid)
}
const submitInfo = () => {
  if (!reasonValue.value) {
    uni.showToast({
      title: '请填写原因哦~',
      icon: 'none'
    })
    return
  }
  $https({
    url: '/feedback/add',
    type: '',
    method: 'post',
    data: {
      content: reasonValue.value,
      type: pageOption.value.type,
      feedbackImages: uploadImg.value
    }
  }).then(res => {
    if (res.code === 0) {
      uni.navigateBack()
      uni.showToast({
        title: '感谢您的反馈，让我们做得更好',
        icon: 'none'
      })
    }
  })
}
</script>
<style scoped lang="scss">
.feed-back{
  min-height: 100vh;
  background-color: #F9F9F9;
  padding-top: 20rpx;
  display: flex;
  flex-direction: column;
  padding-bottom: 100rpx;
  justify-content: space-between;
  .btn-box{
    padding: 0 90rpx;
  }
  .set-btn{
    height: 42px;
    line-height: 42px;
    border-radius: 24px;
    background: #000000;
  }
}
.upload-img{
  background-color: #FFFFFF;
  padding: 32rpx;
  margin-top: 20rpx;
}
</style>
